在JS中流程控制有條件控制和迴圈控制這兩種，今天介紹條件控制中的if/else。

語法

1. 單向條件控制

if (condition)
statement1 

condition(條件)：為表達式，值為truthy或falsy
statement(陳述式)：執行某動作。如有多個陳述式，則必須使用區塊{}將多個陳述式包起來。

之前都沒注意到單行陳述式可以不用大括號耶XD

例如：

const isLoggedIn = true;
if (isLoggedIn) console.log("登入成功");

//這邊陳述式為單行，可以不使用大括號

2. 雙向條件控制

if (條件)
   // 條件成立執行的程式內容
else
   // 條件不成立執行的程式內容

例如：平常小芳喜歡網購，剛好寵物用品店在促銷，滿499元即可免運費，可以這樣寫：

let totalAmount = 700; //小芳購買總金額700元
const shippingFee = 60; //運費60元
const shippingFree = 499; //免運費為499元

if (totalAmount >= shippingFree) {
  console.log("達到免運費門檻!");
} else {
  console.log("要付運費喔!");
}

// 達到免運費門檻!

3. 多重選擇條件控制
   巢狀的if...else，陳述式可以使用else if來處理，else if可以任意數量。

if (condition1)
   statement1
else if (condition2)
   statement2
else if (condition3)
   statement3
// …
else
   statementN

例如：根據溫度來顯示不同訊息

let temperature = 33; // 當前的溫度

if (temperature >= 30) {
  console.log("天氣超熱");
} else if (temperature >= 20 && temperature < 30) {
  console.log("天氣舒適");
} else if (temperature >= 10 && temperature < 20) {
  console.log("天氣好冷，記得保暖");
} else {
  console.log("凍僵了");
}

// "天氣超熱"

小技巧分享

if括號裡面在處理邏輯運算時，有更直觀的寫法。

假設遊樂園票價依照年齡有區別，6歲以上(含)和65歲以上(含)為半票，寫成if...else的判斷式：

// 原先寫法
const personAge = 6;

if (personAge <= 6 || personAge >= 65) {
  console.log("門票半價");
} else {
  console.log("門票全票");
}

// "門票半價"

可以看到if小括號裡面personAge <= 6 || personAge >= 65，我很直覺寫年齡小於等於6或年齡小於等於65，很像中文直接翻譯成程式碼XD

// 修改後寫法
const personAge = 6;

if (6 < personAge && personAge < 65) {
  console.log("門票全價");
} else {
  console.log("門票半票");
}

Mentor code review修改後變得直觀，6 < personAge && personAge < 65，personAge就介於6與65之間，一目了然！

truthy value(真值)與falsy value(假值)

語法中提到，condition為truthy或falsy，判斷是否執行程式碼，要注意truthy、falsy與布林值的true和false不同！

若為「真值」，在條件判斷中被視為 true
若為「假值」，在條件判斷中被視為 false

以下是常見的假值：

• undefined
• null
• false
• +0、-0、NaN
• ""或'' （空字串)
• 0n（BigInt 型別的零）

除了這些falsy外，其餘轉型都屬於truthy。

參考資料

MDN - if/else
MDN - falsy
MDN - truthy